CSS @media: Padrões Avançados de Media Query para uma Web Verdadeiramente Responsiva

No cenário dinâmico do desenvolvimento web moderno, criar experiências que se adaptam perfeitamente a uma gama cada vez maior de dispositivos e contextos de usuário não é apenas uma boa prática – é um imperativo. De monitores de desktop de alta resolução a smartphones compactos, de usuários em centros urbanos movimentados com internet de alta velocidade àqueles em áreas remotas com largura de banda limitada, e de indivíduos que preferem temas escuros àqueles que necessitam de movimento reduzido, a web deve ser flexível. É aqui que as regras CSS @media, a pedra angular do design responsivo, transcendem sua aplicação básica para se tornarem ferramentas poderosas para uma adaptabilidade avançada.

Embora muitos desenvolvedores estejam familiarizados com o uso de @media para ajustes simples de breakpoints, o verdadeiro poder reside em seus padrões avançados, operadores lógicos e na capacidade de explorar as preferências do usuário e do ambiente. Este guia abrangente levará você além dos fundamentos, explorando o mundo complexo dos recursos avançados de media query que permitem criar aplicações web verdadeiramente resilientes, inclusivas e globalmente acessíveis.

Vamos mergulhar em técnicas que permitem que seus designs reajam não apenas ao tamanho da tela, mas também às capacidades do dispositivo, às configurações de acessibilidade do usuário e até mesmo ao ambiente ao redor, garantindo uma experiência superior para cada usuário, em qualquer lugar.

A Base: Uma Breve Recapitulação da Sintaxe Básica de @media

Antes de mergulharmos nos padrões avançados, vamos restabelecer rapidamente a base. Uma media query básica consiste em um tipo de mídia opcional (como screen, print, all) e um ou mais recursos de mídia (como min-width, orientation). Os estilos dentro do bloco @media são aplicados somente se as condições forem atendidas.

            /* Exemplo básico: Estilos aplicados apenas em telas com mais de 768px de largura */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Estilos aplicados apenas ao imprimir a página */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Este entendimento fundamental é crucial, pois os padrões avançados se baseiam diretamente nele.

Além dos Breakpoints: Entendendo os Recursos de Media Query

Embora width e height sejam os recursos de mídia mais frequentemente usados, um rico conjunto de outros permite decisões de design muito mais detalhadas. Entender essas capacidades é fundamental para ir além dos layouts genéricos para celular/tablet/desktop.

Recursos Baseados na Viewport (Os Suspeitos de Sempre e Mais)

Esses recursos se relacionam com as dimensões e características da viewport do navegador, não da tela do dispositivo físico.

• width, height, min-width, max-width, min-height, max-height: Estes são o pão com manteiga do design responsivo. Eles permitem que você defina breakpoints com base na área visível do navegador. Por exemplo, você pode mudar um layout de coluna única para um de múltiplas colunas quando min-width atinge um determinado valor em pixels.

            /* Aplicar um layout de duas colunas em telas mais largas */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Esses recursos permitem que você direcione designs com base na proporção da largura da viewport em relação à sua altura. Isso é incrivelmente útil para otimizar conteúdo para vários formatos de tela, desde monitores ultra-largos até smartphones altos.

            /* Otimizar imagem de destaque para telas ultra-largas (ex: 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Este recurso detecta se a viewport está no modo portrait (altura é maior ou igual à largura) ou landscape (largura é maior que a altura). É particularmente vital para experiências em celulares e tablets.

            /* Ajustar layout para orientação paisagem em tablets */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Recursos Baseados no Dispositivo (Menos Comuns, Mas Ainda Úteis)

Esses recursos se relacionam com as características do dispositivo de saída físico. Embora as consultas baseadas na viewport sejam geralmente preferidas para o layout do conteúdo, os recursos baseados no dispositivo têm nichos específicos.

• device-width, device-height (e suas variantes min/max): Historicamente, eram usados para direcionar resoluções de dispositivos específicos. No entanto, com tamanhos de janela de navegador variáveis em desktops e tablets, e diferentes densidades de pixels, depender deles pode ser pouco confiável para o layout geral. As dimensões da viewport são quase sempre mais apropriadas. Eles ainda podem ser considerados em cenários de nicho muito específicos, como aplicações projetadas para telas de tamanho fixo, como quiosques, mas isso é raro no desenvolvimento web típico.
• resolution: Este recurso permite direcionar telas com base na sua densidade de pixels (DPI ou DPX – pontos por pixel). Isso é crucial para servir imagens de alta qualidade para telas "Retina" ou de alta densidade de pixels (high-DPI) sem entregar arquivos desnecessariamente grandes para telas padrão.

            /* Servir uma imagem de fundo de maior resolução para telas de alta densidade de pixels (high-DPI) */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Note o uso de dpi e dppx para cobrir diferentes interpretações dos navegadores e preparar seu código para o futuro. dppx (unidade de pontos por pixel) é geralmente preferido por ser mais independente do dispositivo.

Operadores Lógicos: Combinando Condições com Precisão

Para construir media queries verdadeiramente sofisticadas, você precisa combinar múltiplas condições usando operadores lógicos. Eles permitem que você especifique exatamente quando um conjunto de estilos deve ser aplicado.

Operador `and`: Todas as Condições Devem Ser Verdadeiras

A palavra-chave and combina múltiplos recursos de mídia ou tipos de mídia e recursos. Todas as condições especificadas devem ser avaliadas como verdadeiras para que os estilos sejam aplicados.

            /* Aplicar estilos apenas em telas com largura entre 768px e 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Isso é extremamente útil para direcionar faixas de dispositivos específicos, como tablets em modo retrato, ou para criar layouts altamente personalizados para dimensões de tela muito específicas.

Operador `or` (`, ` separado por vírgula): Qualquer Condição Pode Ser Verdadeira

Nas regras @media do CSS, uma vírgula (`,`) atua como um OR lógico. Se qualquer uma das media queries separadas por vírgula for avaliada como verdadeira, os estilos associados são aplicados.

            /* Estilos se aplicam se a tela for mais larga que 1200px OU se o dispositivo estiver em orientação paisagem (independentemente da largura) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Estilos se aplicam para mídia de impressão OU para telas com uma resolução mínima */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Para melhor renderização na impressão/alta resolução */
  }
}

            

              
                Copy
              
            
          

Este recurso poderoso permite agrupar estilos que devem ser aplicados sob múltiplas condições distintas, resultando em folhas de estilo mais concisas e legíveis.

Operador `not`: Invertendo uma Condição

A palavra-chave not nega uma media query inteira, o que significa que os estilos são aplicados se a condição especificada não for atendida.

            /* Aplicar estilos a todos os tipos de mídia, EXCETO impressão */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Aplicar estilos se NÃO for uma tela com largura mínima de 768px (ou seja, para impressão ou telas menores que 768px) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

O operador not pode ser complicado e deve ser usado com critério. Certifique-se de entender o escopo do que está sendo negado. Por exemplo, @media not screen and (min-width: 768px) significa "não uma tela E com largura mínima de 768px", o que é logicamente equivalente a "se não for tela OU se for uma tela E a largura máxima for menor que 768px". Muitas vezes é mais claro usar max-width em vez de not min-width.

Palavra-chave `only`: Garantindo Compatibilidade com Versões Anteriores (Contexto Histórico)

A palavra-chave only foi introduzida para ocultar folhas de estilo de navegadores mais antigos que não suportavam totalmente as media queries. Se um navegador antigo encontrasse @media only screen, ele normalmente ignoraria a regra porque não reconhecia only como um tipo de mídia válido. Navegadores modernos a interpretam corretamente. Dado o amplo suporte dos navegadores para media queries hoje, only é em grande parte redundante para novos desenvolvimentos, mas pode ser visto em bases de código legadas.

            /* Exemplo: Estilos aplicados apenas em telas, ocultos de navegadores muito antigos */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Recursos de Mídia de Preferência do Usuário: Abraçando a Inclusividade e a Acessibilidade

Estes são talvez os recursos avançados de media query mais empolgantes e impactantes, pois capacitam os desenvolvedores a responder diretamente às preferências do sistema operacional ou do navegador dos usuários, levando a experiências significativamente mais acessíveis e amigáveis. Isso é especialmente importante para um público global com diversas necessidades e ambientes.

prefers-color-scheme: Modos Claro e Escuro

Este recurso detecta se o usuário solicitou um tema de cores claro ou escuro para seu sistema operacional ou agente de usuário. A implementação do modo escuro melhora significativamente a acessibilidade e o conforto, particularmente em ambientes com pouca luz ou para usuários com sensibilidade à luz.

• no-preference: Nenhuma preferência é indicada pelo usuário.
• light: O usuário prefere um tema claro.
• dark: O usuário prefere um tema escuro.

            /* Tema padrão (claro) */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

Para implementações mais robustas de modo escuro, as Propriedades Personalizadas do CSS (variáveis) são inestimáveis, permitindo que você defina paletas de cores dinamicamente.

prefers-reduced-motion: Respeitando o Conforto do Usuário

Animações e transições podem melhorar a experiência do usuário, mas para alguns indivíduos (por exemplo, aqueles com distúrbios vestibulares, TDAH ou simplesmente aqueles que acham o movimento distrativo), elas podem causar desconforto ou até náusea. Este recurso detecta se o usuário solicitou um mínimo de animações não essenciais.

• no-preference: Nenhuma preferência é indicada.
• reduce: O usuário prefere movimento reduzido.

            /* Animação padrão */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Desativar rolagem suave */
  }
}

            

              
                Copy
              
            
          

É uma forte boa prática de acessibilidade sempre fornecer uma alternativa de movimento reduzido. Isso ajuda a construir uma web que seja utilizável e confortável para todos, independentemente de suas sensibilidades individuais.

prefers-contrast: Ajustando o Contraste Visual

Este recurso detecta se o usuário solicitou um nível de contraste específico para seu sistema operacional. Isso é altamente benéfico para usuários com baixa visão ou certas deficiências de percepção de cores.

• no-preference: Nenhuma preferência.
• less: O usuário prefere menos contraste.
• more: O usuário prefere mais contraste.
• custom: O usuário tem uma configuração de contraste personalizada (menos comum).

            /* Estilos para contraste aumentado */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Ao fornecer estilos para diferentes preferências de contraste, você contribui ativamente para um ambiente digital mais acessível e inclusivo para usuários em todo o mundo.

forced-colors: Lidando com Paletas de Cores Forçadas pelo Sistema

Quando um sistema operacional (como o Modo de Alto Contraste do Windows) força uma paleta de cores específica nas aplicações, às vezes pode substituir ou quebrar designs web personalizados. O recurso de mídia forced-colors ajuda os desenvolvedores a se adaptarem a este cenário, permitindo que forneçam estilos que funcionem bem dentro das restrições de cores forçadas.

• active: O agente de usuário tem um modo de cores forçadas ativo.
• none: Nenhum modo de cores forçadas está ativo.

            /* Ajustes para usuários do Modo de Alto Contraste */
@media (forced-colors: active) {
  /* Garantir que os elementos tenham bordas visíveis */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Remover imagens de fundo que possam obscurecer o texto */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Torná-los visíveis */
  }
}

            

              
                Copy
              
            
          

Este recurso é vital para garantir a conformidade com os padrões de acessibilidade (como WCAG) e fornecer uma experiência funcional para usuários que dependem desses ajustes no nível do sistema.

Recursos de Mídia Ambientais: Adaptando-se às Capacidades do Dispositivo

Esses recursos de mídia permitem que você personalize experiências com base em como um usuário interage com seu dispositivo, como o tipo de dispositivo de apontamento que ele usa ou as capacidades de sua tela.

hover e any-hover: Distinguindo Dispositivos de Apontamento

Esses recursos ajudam a diferenciar entre dispositivos que suportam o efeito hover (por exemplo, desktops com mouse) e aqueles que usam principalmente o toque (por exemplo, smartphones, tablets). Isso é crucial para evitar padrões de UX frustrantes em dispositivos somente de toque.

• hover: Refere-se ao mecanismo de entrada principal.
• any-hover: Refere-se a qualquer mecanismo de entrada disponível.
• Valores: none (sem suporte a hover), hover (com suporte a hover).

            /* Mostrar tooltips apenas em dispositivos com capacidade de hover */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* Em dispositivos de toque, tooltips podem ser acionados pelo foco ou não exibidos */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

Usar any-hover é muitas vezes mais robusto, pois um dispositivo pode ter tanto entrada de toque quanto de mouse (por exemplo, um laptop 2 em 1). Se any-hover for hover, então pelo menos um método de entrada suporta o efeito. Se any-hover for none, então nenhum método de entrada o suporta.

pointer e any-pointer: Distinguindo a Precisão do Ponteiro

Esses recursos detectam a precisão do ponteiro principal (pointer) ou de qualquer ponteiro disponível (any-pointer).

• none: Nenhum dispositivo de apontamento.
• coarse: Dispositivo de apontamento impreciso (por exemplo, dedo em uma tela de toque).
• fine: Dispositivo de apontamento preciso (por exemplo, mouse, caneta stylus).

            /* Aumentar o tamanho do alvo de toque para ponteiros imprecisos */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Reduzir o preenchimento para ponteiros precisos */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Isso é crítico para projetar interfaces amigáveis ao toque, onde os alvos de toque precisam ser suficientemente grandes para a entrada com o dedo, ao mesmo tempo em que permitem um design mais compacto quando a interação precisa do mouse está disponível. Isso afeta diretamente a usabilidade em um espectro de dispositivos e habilidades do usuário, especialmente em mercados globais onde dispositivos de toque são predominantes.

color-gamut: Além do sRGB

O recurso de mídia color-gamut permite detectar se a tela do usuário suporta uma gama de cores mais ampla que o padrão sRGB (por exemplo, P3 ou Rec. 2020). Isso permite que os designers usem uma paleta de cores mais rica e vibrante em telas compatíveis.

• srgb: Gama sRGB padrão.
• p3: A tela suporta a gama P3 (mais ampla que sRGB).
• rec2020: A tela suporta a gama Rec. 2020 (ainda mais ampla).

            /* Usar cores P3 para elementos de marca mais vibrantes em telas compatíveis */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* Um vermelho vibrante em P3 */
  }
}

            

              
                Copy
              
            
          

Embora ainda emergente, este recurso aponta para um futuro de experiências web mais visualmente impressionantes e precisas, especialmente para indústrias criativas ou entrega de conteúdo de alta fidelidade.

update: Lidando com Taxas de Atualização da Tela

Este recurso indica a rapidez com que o dispositivo de saída pode modificar a aparência do conteúdo. Isso é útil para otimizar animações e conteúdo dinâmico para diferentes tipos de tela.

• none: Não pode atualizar (por exemplo, documento impresso).
• slow: Atualiza lentamente (por exemplo, telas e-ink, alguns dispositivos mais antigos).
• fast: Atualiza rapidamente (por exemplo, monitores de computador típicos, smartphones).

            /* Reduzir animações complexas em telas de atualização lenta */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Este recurso ajuda a garantir que os usuários em dispositivos como e-readers, que priorizam a vida útil da bateria e a exibição estática, não recebam uma experiência degradada ou instável devido a animações inadequadas.

Técnicas Avançadas e Boas Práticas

Além dos recursos de mídia individuais, a forma como você estrutura seu CSS e combina esses padrões pode impactar significativamente a manutenibilidade, o desempenho e a qualidade geral do design.

Mobile-First vs. Desktop-First: Uma Escolha Estratégica

A escolha entre uma abordagem mobile-first e desktop-first é fundamental para a estratégia de design responsivo.

• Mobile-First (min-width):
  • Comece projetando e estilizando para a tela menor (celular).
  • Use media queries com min-width para adicionar progressivamente estilos para telas maiores.
  • Benefícios:
    • Desempenho: Dispositivos móveis geralmente têm menos poder de processamento e conexões de internet mais lentas. Uma abordagem mobile-first garante que apenas os estilos necessários sejam carregados inicialmente, resultando em carregamentos de página mais rápidos. Isso é crítico para usuários em regiões com infraestrutura de internet em desenvolvimento.
    • Aprimoramento Progressivo: Você constrói a partir de uma experiência central sólida, adicionando melhorias para dispositivos mais capazes.
    • Foco: Encoraja os desenvolvedores a priorizarem conteúdo e funcionalidades essenciais.
• Desktop-First (max-width):
  • Comece projetando para telas grandes (desktop).
  • Use media queries com max-width para sobrescrever estilos para telas menores.
  • Benefícios: Pode ser mais fácil para equipes acostumadas ao design tradicional de desktop, mas muitas vezes leva a sobrescritas mais complexas para dispositivos móveis.

Para a maioria dos projetos modernos, especialmente aqueles que visam um público global com diversas capacidades de dispositivos e condições de rede, a abordagem mobile-first é fortemente recomendada.

            /* Abordagem mobile-first: Estilos para telas pequenas são o padrão */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Estilos específicos para tablets */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Estilos específicos para desktops */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

Usando Propriedades Personalizadas do CSS (Variáveis) com Media Queries

Combinar Propriedades Personalizadas do CSS (variáveis) com media queries é uma virada de jogo para manter folhas de estilo grandes e responsivas. Em vez de repetir valores, você os define uma vez e altera seus valores dentro das media queries.

            /* Definir valores padrão (mobile) */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Ajustar valores para telas de tablets */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Ajustar valores para telas de desktop */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Usar as variáveis em todo o seu CSS */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Aplicar estilos para telas entre 600px e 900px */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Equivalente usando a sintaxe tradicional */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Ocultar elementos não essenciais para impressão */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* Garantir que o texto seja preto sobre branco para legibilidade */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Exibir URLs completas para links */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Quebrar páginas apropriadamente */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-first: Padrão para um menu oculto, fora da tela */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Tablet e Desktop: Mostrar menu horizontal */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Ajustes adicionais para telas muito largas ou proporções de tela específicas */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Imagem de fundo padrão (mobile/baixa resolução) */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Imagem de fundo de média resolução/desktop */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Imagem de fundo específica para alta densidade de pixels (Retina) */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Tipografia fluida usando calc() e clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Ajustar grade para tablets em modo paisagem, preferindo mais colunas */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ajustar o peso da fonte para o modo de alto contraste para melhor legibilidade */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Variáveis de cor centralizadas, adaptáveis ao modo claro/escuro */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Reduzir animações se preferido pelo usuário */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Ajustes para o modo de cores forçadas */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Garantir que as bordas dos botões sejam visíveis */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Exemplo de uma futura Container Query */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy